<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
    // 这个是根组件
    class App extends React.Component{
    //    因为到时候点击的时候要改变，所以这个count要放在sate上
        state={
            count:0
        }
    render(){
    //这个是解构
        const {count}=this.state;
    /*
    React中都是给虚拟DOM绑定事件，用的都是react自己合成的事件方式，要遵守react事件规范
    案例：<xxx onClick={fn}/>事件后应该跟一个函数，当事件发生的时候函数会调用
    事件函数并不是当前绑定事件的DOM调用，事件函数是默认调用的，事件函数中的this默认指向undefined
    
    */ 


    //这个+号是一个记数器   然后这个+号要放在state上  onClick这个是小驼峰的
    // {handle}这个是JS环境，不写的话会变成字符串
    return(
    <div>
          <button onClick={handle}>+</button>
          <p>{count}</p>
          </div>
   )
    }
    
    } 
// handle是处理的意思
    function handle(){
        alert(1)
        console.log(this);//undefined
    }
   const root =ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App/>)
//只要我把外面的事件给调用的里面的也会跟着触发
/*案例：确实是我们做了一件事件，（调用了fn),shijian才调用，但是根据下边的案例看，
shijin的调用方式是默认调用,this指向undefined(严格模式下)
*/ 
//    function shijian(){

//    }
//    function fn(){
//     shijian();
//    }
//    fn()
   </script>  
</body>
</html>